<template>
    <div>
        <div class="header">
            <van-nav-bar :title="title" left-arrow @click-left="back" />
        </div>

        <div class="mainBox">
            <img src="../../assets/recharge/indexTop.png" class="topImg" alt="">
            <div class="titleCon">
                <span>巅峰让利</span>
                <span>钜惠到底</span>
            </div>
            <!-- <div class="timeCon">
                活动时间：2024.06.31-2028.2.28
            </div> -->

            <div class="listMain">
                <div class="titleBox">使用记录</div>
                <template v-if="historyList.length != 0">
                    <div class="historyItem" v-for="(item, index) in historyList" :key="index">
                        <div>
                            <template v-if="rechargeFlag == 1">
                                <div>充值</div>
                                <div> {{ item.dateTime }}</div>
                            </template>
                            <template v-if="rechargeFlag == 2">
                                <div>{{ item.detailType == 0 ? '用户充值储值金' : '用户购买商品' }} </div>
                                <div> {{ item.dateTime }}</div>
                            </template>
                            <template v-if="rechargeFlag == 4">
                                <div>订单编号：{{ item.orderNumber }}</div>
                                <div> {{ item.dateTime }}</div>
                            </template>
                        </div>
                        <span>
                            <template v-if="rechargeFlag == 1">
                                + {{ item.storedMoney }}
                            </template>
                            <template v-if="rechargeFlag == 2">
                                + {{ item.detailType == 0 ? item.shareMoney : item.storedMoney }}
                            </template>
                            <template v-if="rechargeFlag == 4">
                                - {{ item.storedMoney }}
                            </template>
                        </span>
                    </div>

                </template>
                <div v-else class="emptyBox">暂无记录</div>
            </div>
            <!-- 主体区域 -->


        </div>
    </div>

</template>

<script>

import { listDetail, listShareDetail, listPayDetail } from '../../network/recharge'

export default {
    name: 'HomeR',
    data() {
        return {
            title: '',
            historyList: [],
            rechargeFlag: -1,  //  1 余额  2 邀请返利  3 充值返利  4 累计消费
        }
    },
    mounted() {

    },
    methods: {
        getData() {

            if (this.rechargeFlag == 1) {
                listDetail({
                    userId: localStorage.userId,
                    flag: 0
                }).then(res => {
                    if (res.flag) {
                        res.data.forEach(item => {
                            item.shareMoney = item.shareMoney.toFixed(2)
                            item.storedMoney = item.storedMoney.toFixed(2)
                        })
                        this.historyList = res.data
                    }
                })

            } else if (this.rechargeFlag == 2) {
                listShareDetail({
                    userId: localStorage.userId
                }).then(res => {
                    if (res.flag) {
                        res.data.forEach(item => {
                            item.shareMoney = item.shareMoney.toFixed(2)
                            item.storedMoney = item.storedMoney.toFixed(2)
                        })
                        this.historyList = res.data
                    }
                })
            } else {
                listDetail({
                    userId: localStorage.userId,
                    flag: 1
                }).then(res => {
                    if (res.flag) {
                        res.data.forEach(item => {
                            item.storedMoney = item.storedMoney.toFixed(2)
                        })
                        this.historyList = res.data.reverse()
                    }
                })
            }

        },
        back() {
            this.$router.go(-1)
        },



    },
    created() {
        this.rechargeFlag = localStorage.rechargeFlag

        console.log(this.rechargeFlag);
        if (this.rechargeFlag == 1) {
            this.title = '储值记录'
        } else if (this.rechargeFlag == 2) {
            // 邀请返利
            this.title = '邀请返利记录'
        } else if (this.rechargeFlag == 4) {
            this.title = '消费记录'
        }

        this.getData()
    },
    //计算属性
    computed: {

    },
    filters: {

    }

}

</script>

<style lang='less' scoped>


.mainBox {
    padding: 90px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 750px;
    height: calc(100vh - 160px);
    background: #A5000A;
    overflow-y: scroll;

}

.topImg {
    width: 750px;
    height: 288px;
}


.titleCon {
    margin-top: -24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 468px;
    height: 51px;
    border: 2.0025px solid #F2E4C9;
    font-family: Source Han Sans CN;
    font-weight: 300;
    font-size: 36px;
    color: #F1DDBF;
    line-height: 50.0025px;
}

.titleCon>span {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1;

}

.titleCon>span:last-child {
    background-color: #F2E4C9;
    color: #9B0021;
}

.timeCon {
    margin: 36px 0 0;
    width: 100%;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 24px;
    color: #FFFFFF;
    line-height: 20.0025px;

}


.listMain {
    padding-bottom: 74.0025px;
    margin: 36px 0 0;
    box-sizing: border-box;
    width: 710.0025px;
    /* background: linear-gradient(-90deg, #EAB883, #F2E6CC, #EAB783); */
    border-radius: 39.9975px;
    border: 3.9975px solid #EBBE8E;
}

.titleBox {
    padding: 30px 0 24px 0;
    width: 100%;
    border-bottom: 2.0025px solid #EBBE8E;
    text-align: center;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 27.9975px;
    color: #EBBE8E;

}

.historyItem {
    box-sizing: border-box;
    padding: 44.0025px 33.9975px 44.0025px 44.0025px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 2.0025px solid #EBBE8E;
    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: 27.9975px;
    color: #EBBE8E;
    line-height: 38.0025px;


}

.historyItem>div>div:first-child {
    width: 450px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.emptyBox {
    margin: 300px 0;
    width: 100%;
    text-align: center;
    font-size: 36px;
    color: #EBBE8E;
}



.header .van-icon {
    color: #333;
    font-size: 40px;
    font-weight: bold;
}

.header .van-nav-bar__text {
    color: #333;
}

.header {
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 88px;
    background-color: #fff;
    // padding-top: 60px;
}

/deep/.van-nav-bar__text,
/deep/.van-nav-bar__left,
/deep/.van-nav-bar .van-icon {
    color: #333;
}
</style>